input[type="radio"] {
	margin: 0;
	width: 18px;
	height: 18px;
	vertical-align: middle;
	background: $md-grey-600;
	color: rgba(0, 0, 0, .12);
	border: 2px solid $md-grey-600;
	box-shadow: inset 0 0 0 9px #FFF,
				0 0 0 0 currentColor;

	.dark & {
		border-color: #FFF;
		background: $md-dark-bg;
		color: rgba(255, 255, 255, .12);
		box-shadow: inset 0 0 0 9px $md-dark-bg,
					0 0 0 0 currentColor;
	}

	&:focus,
	&:active {
		background: currentColor;
		animation: radioFocus .15s linear forwards;

		.dark & {
			animation-name: radioFocusDark;
		}
	}

	&:checked,
	&:checked:focus,
	&:checked:active {
		background: $accent-color;
		border-color: $accent-color;
		color: rgba($accent-color, .12);
		box-shadow: inset 0 0 0 3px #FFF,
					inset 0 0 0 3px #FFF,
					0 0 0 0 currentColor;

		.dark & {
			box-shadow: inset 0 0 0 3px $md-dark-bg,
						inset 0 0 0 3px $md-dark-bg,
						0 0 0 0 currentColor;
		}
	}

	&:checked:focus,
	&:checked:active {
		animation-name: radioFocusChecked;

		.dark & {
			animation-name: radioFocusCheckedDark;
		}
	}

	@keyframes radioFocus {
		37.5% {
			box-shadow: inset 0 0 0 0 #FFF,
						0 0 0 0 currentColor;
		}
		100% {
			box-shadow: inset 0 0 0 0 #FFF,
						0 0 0 12px currentColor;
		}
	}

	@keyframes radioFocusDark {
		37.5% {
			box-shadow: inset 0 0 0 0 $md-dark-bg,
						0 0 0 0 currentColor;
		}
		100% {
			box-shadow: inset 0 0 0 0 $md-dark-bg,
						0 0 0 12px currentColor;
		}
	}

	@keyframes radioFocusChecked {
		37.5% {
			box-shadow: inset 0 0 0 3px currentColor,
						inset 0 0 0 3px #FFF,
						0 0 0 0 currentColor;
		}
		100% {
			box-shadow: inset 0 0 0 3px currentColor,
						inset 0 0 0 3px #FFF,
						0 0 0 12px currentColor;
		}
	}

	@keyframes radioFocusCheckedDark {
		37.5% {
			box-shadow: inset 0 0 0 3px currentColor,
						inset 0 0 0 3px $md-dark-bg,
						0 0 0 0 currentColor;
		}
		100% {
			box-shadow: inset 0 0 0 3px currentColor,
						inset 0 0 0 3px $md-dark-bg,
						0 0 0 12px currentColor;
		}
	}
}